<template>
        
           <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  ref="loadmore">
<div class="news">
  <ul>

<li v-for="(item,index) in newsList" :key='index'>
  <img :src="`http://localhost:3000/${item.imgObject.filename}`">
  </li >

  </ul>

  <!-- <mt-cell v-for="(item,index) in newsList" :key='index' title="标题文字">
  <span>icon 是图片</span>
  <img slot="icon" :src="`http://localhost:3000/${item.imgObject.filename}`" width="70" height="70">
</mt-cell> -->
</div>
</mt-loadmore>
        
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data(){
       return{
          allLoaded:false,
          page:1,
      }
  },
   computed: {
    ...mapGetters(["newsList","nomore"])
  },
  methods: {
    ...mapActions(["getNewsList"]),
     loadTop:function() { //组件提供的下拉触发方法  
                        //下拉刷新
        this.page=1;
         this.getNewsList();
        this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位  
      },  
      loadBottom:function() {  // 上拉加载  
      
        this.page++;
        this.getNewsList({page:this.page}) 
          this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
          this.allLoaded=false 
       
      },  
  },
   created() {
    this.getNewsList();
  }
}
</script>

<style lang="scss" scoped>
.mylist .mint-cell-title .mint-cell-text {
  display: inline-block;
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news{
    min-height: 600px;
}
</style>
